<template lang="html">
  <Row>
    <Col span="18">
      <div class="background-white">
        <Carousel autoplay v-model="carousel" loop :autoplay-speed="4000">
          <CarouselItem>
            <a href="https://sma2lbao.gitee.io/" target="_blank">
              <div class="layout-carousel">
                <img src="http://sma2lbao.gitee.io/static/img/mask.jpg" >
                <p :style="{top: '80%', left: 'auto', right: '20px', transform: 'translate(0, 0)'}">要不要看看我是谁呢？</p>
                <p :style="{top: '90%', left: 'auto', right: '20px', transform: 'translate(0, 0)', fontSize: '12px'}">——个人简历</p>
              </div>
            </a>
          </CarouselItem>
          <CarouselItem>
            <a href="https://gitee.com/sma2lbao/website" target="_blank">
              <div class="layout-carousel">
                <img src="http://sma2lbao.gitee.io/static/img/pleasestar.jpg" >
                <p :style="{left: '20%', top: '45%'}">我有一壶酒，足以慰风尘。</p>
                <p :style="{left: '20%', top: '55%'}">尽倾江海里，赠饮天下人。</p>
                <p :style="{left: '25%', top: '65%', fontSize: '12px'}">代码仓库</p>
              </div>
            </a>
          </CarouselItem>
        </Carousel>
      </div>

      <div :style="{marginTop: '10px'}">
          <Card class="card-blog-picture" v-for="item in InfoItems">
            <Row>
              <Col :span="18" :style="{paddingRight: '10px'}">
                <div :style="{borderBottom: '1px dashed #ddd', paddingBottom: '3px'}">
                  <div class="inline tc" :style="{marginRight: '16px'}">
                    <Avatar v-if="item.authorPhotoUrl" size="large" :src="item.authorPhotoUrl"></Avatar>
                    <Avatar v-cloak v-else size="large">
                      {{item.authorName.substring(0, 1)}}
                    </Avatar>
                    <p class="author-name">{{item.authorName}}</p>
                  </div>
                  <div class="inline" :style="{verticalAlign: 'top'}">
                    <h5 class="blog-title" @click="handleBlogDetail(item._embedded.parentCategory.id, item.id)">{{ item.title }}</h5>
                    <p :style="{color: '#999', fontSize: '13px', marginTop: '5px'}">
                      <span :style="{marginRight: '20px'}"><Icon type="chatbox"></Icon> {{item.commentCount}}</span>
                      <span :style="{marginRight: '20px'}"><Icon type="eye"></Icon> {{item.views}}</span>
                      <span :style="{marginRight: '20px'}">创建于: <span>{{$moment(item.createTime).format('YYYY/MM/DD HH:mm:ss')}}</span></span>
                    </p>
                  </div>
                </div>
                <div :style="{paddingTop: '10px', color: '#666'}">
                  <div>
                    <span v-html="item.content.replace(/<.+?>/g, '').substring(0, item.content.replace(/<.+?>/g, '').length > 300 ? 300 : item.content.replace(/<.+?>/g, '').length)"></span>
                    <span v-if="item.content.replace(/<.+?>/g, '').length > 300">...</span>
                    <a @click="handleBlogDetail(item._embedded.parentCategory.id, item.id)">查看全文</a>
                  </div>
                </div>
              </Col>
              <Col span="6">
                <img :src="item.imgs.length > 0 ? item.imgs[0] : '' " width="100%" :style="{height: '200px', objectFit: 'contain'}" v-holder="'img=225x200?size=10px&align=center&auto=yes&random=yes&text=' + (item.title.length > 10 ? item.title.substring(0, 10) + '...' : item.title)">
              </Col>
            </Row>
          </Card>
      </div>
      <div class="spin-wrap" ref="refreshSlot">
        <Spin fix v-if="!complete"></Spin>
        <p class="spin-complete" v-else>已经到底了...</p>
      </div>
    </Col>
    <Col span="6" :style="{paddingLeft: '10px'}">
      <!-- <Card :style="{borderRadius: '0px'}">
        <p slot="title">占位</p>
        <p>...</p>
      </Card> -->
      <WeatherCard />
    </Col>
  </Row>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'Vuex'
import WeatherCard from '../components/WeatherCard.vue'
import Helper from '../utils/index'
export default {
  data () {
    return {
      carousel: 0,
      InfoItems: [],
      page: 0,
      size: 5,
      sort: 'createTime,desc',
      lock: false,
      complete: false,
    }
  },
  components: {WeatherCard},
  computed: {
    ...mapState([
      'activeMenu'
    ])
  },
  methods: {
    ...mapMutations([ 'changeMenu' ]),
    ...mapActions(['getUsernameAndPhotoUrlById', 'queryCommentCountByTargetBlogId', 'queryCountViewByBlogId']),
    handleBlogDetail (categoryId, id) {
      this.$router.push({ name: 'BlogDetail', params: { categoryId: categoryId, blogId: id }})
    },
    handleInfoItems () {
      this.$store.dispatch('blogPagingAndSorting', {
        page: this.page,
        size: this.size,
        sort: this.sort,
      })
      .then(res => {
        const blogs = res.data._embedded.blogs

        blogs.map(async blog => {
          let {username, photoUrl} = await this.getUsernameAndPhotoUrlById(blog.authorId)
          let count = await this.queryCommentCountByTargetBlogId(blog.id)
          let views = await this.queryCountViewByBlogId(blog.id)
          console.log('views', views);
          Object.assign(blog, {
            authorName: username,
            authorPhotoUrl: photoUrl,
            commentCount: count,
            imgs: Helper.findImgSrcInString(blog.content),
            views
          })
          // this.$set(blog, 'authorName', username)
          // this.$set(blog, 'authorPhotoUrl', photoUrl)
          // this.$set(blog, 'commentCount', count)
        })
        console.log(blogs);
        this.InfoItems = [...this.InfoItems, ...blogs]
        if (res.data.page.totalPages > this.page) {
          this.page = this.page + 1
        }
        // unlock
        this.lock = false
        // 完成后给出提示
        if (res.data.page.totalPages === this.page) {
          this.complete = true
          this.lock = true
        }
        // console.log(this.InfoItems);
      })
      .catch(err => {
        console.log(err)
      })
    },

    handleScrollListen () {
      // 浏览器的可视高度
      const browserClientHeight = document.documentElement.clientHeight
      // 目标顶部相对于浏览器顶部的距离
      const targetClientToTop = this.$refs.refreshSlot.getBoundingClientRect().top
      // 目标高度
      const targetHeight = this.$refs.refreshSlot.scrollHeight
      if (targetClientToTop <= browserClientHeight) {
        if (!this.lock) {
          this.lock = true
          this.handleInfoItems()
        }
      }
    }
  },
  beforeMount () {
    this.handleInfoItems()
  },

  mounted () {
    window.addEventListener('scroll', this.handleScrollListen)
  },

  destroyed () {
    window.removeEventListener('scroll', this.handleScrollListen)
  }
}
</script>

<style lang="css" scoped>
    .background-white{
      background-color: #fff;
    }
    .layout-carousel{
      height: 300px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      position: relative;
    }
    .layout-carousel img {
      object-fit: cover;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .layout-carousel p {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .card-blog-picture{
      margin: 5px auto;
      border-radius: 0px;
    }
    .inline{
      display: inline-block;
    }
    .fl{
      float: left;
    }
    .tc{
      text-align: center;
    }
    .clearfix::after{
      content: "";
      clear: both;
      display: table;
    }
    .author-name{
      font-size: 12px;
      color: #999;
    }
    .blog-title{
      font-size: 18px;
      cursor: pointer;
    }
    .blog-title:hover {
      text-decoration: underline;
    }
    .spin-wrap {
      text-align: center;
      position: relative;
      /* height: 30px; */
      margin-top: 20px;
    }
    .spin-complete {
      margin-top: -10px;
    }
</style>
